<template>
  <div class="login-root">
    <el-avatar class="head-photo" shape="square" :size="120" :src="photoUrl"></el-avatar>
    <el-form :model="login" ref="loginForm" class="bjs-form" :rules="rules" style="width: 70%;">
      <el-form-item prop="serverUrl">
        <el-input class="bjs-input" v-model="login.serverUrl" placeholder="服务器地址" @keyup.enter.native="loginn">
          <template slot="prepend"><i class="iconfont icon-cloud1-20" style="font-size: 20px"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="username">
        <el-input class="bjs-input" v-model="login.username" placeholder="用户名" @keyup.enter.native="loginn">
          <template slot="prepend"><i class="iconfont icon-username"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input class="bjs-input" v-model="login.password" placeholder="密码" @keyup.enter.native="loginn" show-password >
          <template slot="prepend"><i class="iconfont icon-password"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item style="text-align: center;">

        <el-col :span="15">
          <el-button-group>
            <el-button size="mini" class="bjs-button" @click="loginn">登 陆</el-button>
  <!--          <el-button size="mini" class="btn-success" @click="logout">注 销</el-button>-->
          </el-button-group>
        </el-col>

        <el-col :span="4">
          <div class="loginState">
            <span  class="wait"    v-if="loginState === 1">请登陆...</span>
            <span  class="success" v-else-if="loginState === 2">登陆成功</span>
            <span  class="failure" v-else-if="loginState === -1">登录失败</span>
          </div>
        </el-col>
      </el-form-item>
    </el-form>


    <el-card class="login-car">
      <span>搭建配套服务端,可以更好的管理图片,获得最佳体验.</span>
      <br><br>
      <span>更多信息请查看 <em style="color: indianred" @click="toTabs('3')">帮助</em></span>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "login",
  data () {
    return {
      defaultPhotoUrl: 'http://xiaozei-bucket.oss-cn-hangzhou.aliyuncs.com/xiaozei/bjasminesys/logo/default_user_photo1.jpg',
      login: {
        serverUrl:'',
        username: '',
        password: ''
      },
      rules: {
        serverUrl: [{ required: true, trigger: 'blur', message: ' ' }],
        username:  [{ required: true, trigger: 'blur', message: ' ' }],
        password:  [{ required: true, trigger: 'blur', message: ' ' }],
      }
    }
  },
  methods: {
    toTabs (value) {
      this.$emit('toTabs', value)
    },
    loginn () {
      this.$store.commit('CLEAR_CACHE_USERINFO')
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.$store.commit('SET_SERVER_URL',this.login.serverUrl)
          this.$store.dispatch('LoginByUsername', this.login).then(() => {
            this.$emit('loginCallback')
          }).catch(() => {
          })
        }
      })
    },
    logout () {
    },
    init () {
      this.login.serverUrl  = this.$store.state.config.login.serverUrl
      this.login.username   = this.$store.state.config.login.username
      this.login.password   = this.$store.state.config.login.password
    }
  },
  computed: {
    photoUrl () {
      return this.$store.state.config.userInfo.photoUrl ? this.$store.state.config.userInfo.photoUrl : this.defaultPhotoUrl
    },
    loginState () {
      return this.$store.state.config.login.loginState
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="scss">
  .login-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    @include bg_color();
  }

  .head-photo {
    border: 1px solid #DCDFE6;
    margin-bottom: 30px;
    border-radius: 10px;
  }

  .loginState {
    font-size: 11px;
    .wait {
      color: #5a5a5a;
    }
    .success {
      color: #579a08;
    }
    .failure {
      color: #9a1116d4;
    }
  }

  .login-car {
    height: 80px;
    width: 70%;
    margin: 15px 0;
    font-size: 12px;

    [data-theme="night"] & {
      background-color: #5a5a5a;
      color: #909399;
      //color: $theme-color-night-dark;
      border: 1px solid #5a5a5a;
    }
  }
</style>
